import React from "react";
import Ionicon from 'react-ionicons'
import PropTypes from 'prop-types'
import {LIST_VIEW,CHART_VIEW} from "../utility";

const generateLinkClass = (current, view)=>{
  return (current === view) ? 'nav-link active':'nav-link'
}

const ViewTab = ({activateTab, onTabChange})=>{
 return(
   <ul className="nav nav-tabs nav-fill my-4">
     {/*https://getbootstrap.com/docs/4.0/components/navs/#*/}
     <li className="nav-item">
       <a className={generateLinkClass(activateTab,LIST_VIEW)}
          href="#"
         onClick={(event)=>{event.preventDefault(); onTabChange(LIST_VIEW)}}
       >
         <Ionicon
           className="rounded-circle mr-2"
           fontSize="25px"
           color={'#007bff'}
           icon='ios-paper'
         />
         列表模式
       </a>
     </li>
     <li className="nav-item">
       <a className={generateLinkClass(activateTab,CHART_VIEW)}
          href="#"
          //event.preventDefault()==>会阻止 href="#" 这个事件，就是跳往页首
          onClick={(event)=>{event.preventDefault(); onTabChange(CHART_VIEW)}}
       >
         <Ionicon
           className="rounded-circle mr-2"
           fontSize="25px"
           color={'#007bff'}
           icon='ios-pie'
         />
         图标模式
       </a>
     </li>

   </ul>
 )

}

ViewTab.propTypes = {
  activeTab: PropTypes.string.isRequired,
  onTabChange: PropTypes.func.isRequired,
}


export default ViewTab